/* eslint-disable @next/next/no-img-element */
/* eslint-disable jsx-a11y/alt-text */
import { useStableDiffusionStore } from "../store/stableDiffusion";
import { IconButton } from "./button";
import { ListItem, PromptInput, showPrompt } from "./ui-lib";
import ConfigIcon from "../icons/config.svg";
import { Table } from "antd";
import { SDApi } from "../api/expand/stableDiffusion";
import { useState } from "react";
import { GenerateTest } from "./generateTest";
const Models = () => {
  const [checkModel, setCheckModel] = useState<boolean>();
  const { models, update, nowModel } = useStableDiffusionStore();
  const columns = [
    {
      title: "模型名称",
      dataIndex: "name",
      key: "name",
      ellipsis: true,
    },
    {
      title: "操作",
      key: "action",
      width: 300,
      render: (_: any, { name }: { name: string }) => (
        <div style={{ display: "flex", justifyContent: "space-around" }}>
          <IconButton
            disabled={checkModel}
            text={"使用"}
            icon={<ConfigIcon />}
            onClick={async () => {
              setCheckModel(true);
              const res = await SDApi.checkModel(name);
              if (res) {
                setCheckModel(false);
                update((stable) => (stable.nowModel.name = name));
              }
            }}
          ></IconButton>
        </div>
      ),
    },
  ];

  return (
    <>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          marginLeft: 20,
          fontSize: 14,
          width: "100%",
          justifyContent: "space-between",
        }}
        className="top"
      >
        <IconButton
          text={"获取模型"}
          bordered
          onClick={async () => {
            const models = await SDApi.getModels();
            update((stable) => {
              stable.models = models.map((e) => {
                return { name: e.id! };
              });
            });
          }}
        />
        {nowModel.name && (
          <div style={{ marginRight: 20 }} className="action">
            正在使用模型：{nowModel.name}
          </div>
        )}
      </div>
      <Table
        rowKey={"username"}
        style={{ marginTop: 16 }}
        columns={columns}
        dataSource={models}
      />
    </>
  );
};
export const StableDiffusion = () => {
  const { template, update, url, SDParams, defaultPrompt, PromptCheck } =
    useStableDiffusionStore();
  return (
    <>
      <ListItem
        title={"一键启动StableDiffsuion"}
        subTitle={"启动StableDiffsuion"}
      >
        <IconButton
          text={"一键启动"}
          bordered
          onClick={() => {
            alert("暂时不支持，请使用api地址");
          }}
        />
      </ListItem>
      <ListItem
        title={"启动关键词检测"}
        subTitle={"将会检测你对话中的关键词，根据关键词配置生成图片"}
      >
        <input
          type="checkbox"
          checked={PromptCheck}
          onChange={(e) =>
            update((stable) => (stable.PromptCheck = e.currentTarget.checked))
          }
        ></input>
      </ListItem>
      <ListItem
        title={"关键词配置"}
        subTitle={
          "将会检测你对话中的关键词，自动生成图片，例如'Sable:[input]',将会识别到input进行图片生成"
        }
      >
        <input
          type="text"
          value={template}
          placeholder={"input为关键词"}
          onChange={(e) =>
            update((stable) => (stable.template = e.currentTarget.value))
          }
        ></input>
      </ListItem>
      <ListItem
        title={"默认正向关键词"}
        subTitle={"将会追加到用户输入的关键词后面"}
      >
        <input
          type="text"
          value={defaultPrompt}
          onChange={(e) =>
            update((stable) => (stable.defaultPrompt = e.currentTarget.value))
          }
        ></input>
      </ListItem>
      <ListItem
        title={"Api地址"}
        subTitle={"stableDiffsuion Api的地址,例如:127.0.0.1:7860"}
      >
        <input
          type="text"
          value={url}
          placeholder={""}
          onChange={(e) =>
            update((stable) => (stable.url = e.currentTarget.value))
          }
        ></input>
      </ListItem>
      <ListItem title={"模型配置"} subTitle={"stableDiffsuion绘画模型配置"}>
        <div style={{ display: "flex" }}>
          <IconButton
            icon={<ConfigIcon />}
            text={"配置"}
            onClick={async () => {
              await showPrompt("StableDiffusion配置", SDParams, 10, <Models />);
            }}
          />
        </div>
      </ListItem>
      <ListItem
        title={"参数设置"}
        subTitle={"使用json或者js对象格式的字符串进行配置"}
      >
        <IconButton
          icon={<ConfigIcon />}
          text={"配置"}
          onClick={async () => {
            const result = await showPrompt(
              "StableDiffusion参数设置",
              SDParams,
              10,
            );
            update((Stable) => {
              Stable.SDParams = result;
            });
          }}
        />
      </ListItem>
      <ListItem title={"生成测试"} subTitle={"测试stableDiffusion生成图片"}>
        <IconButton
          text={"生成测试"}
          bordered
          icon={<ConfigIcon />}
          onClick={async () => {
            await showPrompt("生成测试", null, 10, <GenerateTest />);
          }}
        />
      </ListItem>
    </>
  );
};
